<template>
    <view class="check-work-record">
        <view class="title">
            <view>我的考勤记录</view>
            <u-button size="middle" type="primary" @click="navigateTo">
                申请补卡
            </u-button>
        </view>
        <view class="record-detail" v-if="choosedDay.punchDate">
            <view class="detail-title">{{choosedDay.punchDate.split('-')[2]}}日打卡</view>
            <view class="detail-box">
                <view class="segment-item"
                    v-for="(item, index) in choosedDay.segments"
                    :key="index"
                    >
                    <view class="detail-item">
                        <view class="work-detail-text" :class="choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1) ? ![0,4,5,6].includes(choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1).status) ? 'red' : '' : '' ">上班</view>
                        <view class="work-detail-time" :class="choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1) ? ![0,4,5,6].includes(choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1).status) ? 'red' : '' : '' ">
                            {{`${choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1) ? formatStatus[choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1).status] + '('+choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 1).punchTime.substr(0,5) +')' : '--'}` }}
                        </view>
                    </view>
                    <view class="detail-item">
                        <view class="work-detail-text" :class="choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 2) ? ![0,4,5,6].includes(choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 2).status) ? 'red' : '' : '' ">下班</view>
                        <view class="work-detail-time"  :class="choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 2) ? ![0,4,5,6].includes(choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 2).status) ? 'red' : '' : '' ">
                            {{`${choosedDay.records.find(_item => _item.segmentId == item.id  && _item.punchType == 2) ? formatStatus[choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 2).status] + '('+choosedDay.records.find(_item => _item.segmentId == item.id && _item.punchType == 2).punchTime.substr(0,5) +')' : '--'}`}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="work-record-date">
            <view class="work-record-date-year" @click="show = true">
                <view>
                    {{currentYear}}年{{currentMonth}}月考勤记录
                </view>
                <view class="tongji">
                    正常：20天 | 异常：1天
                </view>
            </view>
            <view class="work-record-date-detail">
                <view class="date-detail-head">
                    <view class="date-detail-head-item" v-for="(i, index) in dateHeaders" :key="index">
                        <view class="item-name">
                            <view>{{i}}</view>
                        </view>
                    </view>
                </view>
                <view class="dete-detail-content">
                    <view class="date-detail-content-item"
                    :class="choosedDay.punchDate == item.punchDate ? 'active': ''"
                    v-for="(item, index)  in dateRecord"
                    :key="index"
                    @click="item.punchDate ? choosedDay = item : {}">
                        <view class="item-name" v-show="item.punchDate">
                            <view>{{+item.punchDate.split('-')[2]}}</view>
                            <view class="state" :class="(item.status == 1) ? 'state-error' : ''"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <u-picker mode="time" v-model="show" :params='dateParams' :default-time="`${currentYear}-${currentMonth}`" :mask-close-able="false" @confirm="changeDate"></u-picker>
    </view>
</template>


<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared'
  }
})
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, type Ref } from 'vue'
import { getDaysInMonth, getCurrentWeekday } from '@/utils/utils'
import { attendanceRecord, attendanceMonthRecord } from '@/api'
import moment from 'moment'
const show = ref(false)
const dateParams = ref({
    year: true,
	month: true
})
const current = ref(2)
const list = ref([
    {
        iconPath: "home",
        selectedIconPath: "home-fill",
        text: '打卡',
        isDot: true,
		customIcon: false,
    },
    {
        iconPath: "home",
        selectedIconPath: "home-fill",
        text: '申请',
    },
    {
        iconPath: "home",
        selectedIconPath: "home-fill",
        text: '考勤记录',
    }
])
const currentMonth = ref(0)
const currentYear = ref(2024)
const choosedDay = ref({})
const dateHeaders = ref(['日','一','二','三','四','五','六'])
const dateRecord = ref([])
const formatStatus = ref({
    0: '正常',
    1: '迟到',
    2: '早退',
    3: '缺卡',
    4: '补卡',
    5: '外出打卡',
    6: '请假',
    7: '异常打卡'
})
const formatTime = (time:string) => {
    return time.substr(0,5)
}
const changeDate = (date:any) => {
    console.log(date)
    currentYear.value = date.year
    currentMonth.value = date.month
    getattendanceMonthRecord()
}
const navigateTo = (data:any) => {
    const url = '/workAttendance/supplement-apply'
    console.log(data)
    uni.navigateTo({
        url: url
    })
}
const getAttendanceRecord = async () => {
    const params = {
        punchDate: `${currentYear.value}-${currentMonth.value}-01`
    }
    let res = await attendanceRecord(params)
}
const getattendanceMonthRecord = async () => {
    choosedDay.value = {}
    dateRecord.value = []
    const params = {
        year: currentYear.value,
        month: currentMonth.value
    }
    let res = await attendanceMonthRecord(params)
    dateRecord.value = res
    const length = dateRecord.value.length
     for(let i = 0; i < length; i++) {
        if (i == 1) {
            const week = dateRecord.value[0].dayOfWeek.substr(2, 1)
            const index = dateHeaders.value.findIndex(item => item == week)
            for(let j = 0; j < index; j++) {
                dateRecord.value.unshift({})
            }
        }
     }
     let today = moment().format('yyyy-MM-DD')
     choosedDay.value = res.find(item => item.punchDate == today) || {}
}
const now:Ref<any> = ref('')
onLoad(() => {
    dateRecord.value = []
    now.value = new Date()
    currentMonth.value = now.value.getMonth() + 1
    currentYear.value = now.value.getFullYear()
    getattendanceMonthRecord()
})
</script>

<style lang="scss">
.check-work-record{
    background: rgba(239, 246, 255, 0.8);
    border-radius: 24rpx;
    margin: 24rpx;
    padding: 24rpx;
    .title{
        font-size: 36rpx;
        color: #000;
        margin-bottom: 32rpx;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }
    .work-record-date-year{
        padding: 24rpx 0 0;
        font-size: 32rpx;
        color: #000;
        display: flex;
        justify-content: space-between;
        .tongji{
            color: #6B7280;
            font-size: 28rpx;
        }
    }
    .work-record-date-detail{
        padding: 24rpx 0;
        .date-detail-head, .dete-detail-content{
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }
        .date-detail-head-item, .date-detail-content-item{
            text-align: center;
            padding-bottom: 100%;
            border-radius: 50%;
            margin-bottom: 8rpx;
            position: relative;
            &.active{
                background: #cde9ff;
                color: #218de2;
            }
            &.choosed {
                background: #218de2;
                color: #fff;
            }
            .item-name{
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .state{
                width: 10rpx;
                height: 10rpx;
                border-radius: 5rpx;
                background: #218de2;
                margin-top: 20rpx;
                &.state-error{
                    background: #de2828;
                }
            }
        }
    }
    .record-detail{
        margin: 24rpx 0;
        border-radius: 12rpx;
        background: #fff;
        display: flex;
        padding: 24rpx;
        .detail-title{
            font-size: 28rpx;
            margin-right: 12rpx;
        }
        .detail-box{
            display: flex;
            .segment-item{
                display: flex;
                flex-wrap: wrap;
            }
            .detail-item{
                display: flex;
                color: #22C55E;
                margin-right: 12rpx;
                .work-detail-time.red, .work-detail-text.red{
                    color: #FEE2E2;
                }
                .work-detail-text{
                    margin-right: 8rpx;
                }
            }
            
        }
        .work-detail{
            
        }
    }
}
</style>

